<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跑马灯特效</title>

  <link rel="stylesheet" href="./swiper-bundle.min.css">

  <link rel="stylesheet" href="./index.css">

</head>

<body>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" data-title="描述文本一">
        <img src="../images/bataman0001.jpg" alt="">
      </div>
      <div class="swiper-slide" data-title="哈哈哈哈">
        <img src="../images/bataman0002.jpg" alt="">
      </div>
      <div class="swiper-slide" data-title="嘻嘻嘻嘻嘻">
        <img src="../images/bataman0004.jpg" alt="">
      </div>
      <div class="swiper-slide" data-title="呵呵呵呵呵">
        <img src="../images/bataman0005.jpg" alt="">
      </div>
      <div class="swiper-slide" data-title="黑暗骑士">
        <img src="../images/bataman0006.jpg" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

  <hr>

  <div>
    推荐你们看<span class="info">一个演员的自我修养</span>这本书
  </div>

  <script src="./swiper-bundle.min.js"></script>

  <script>
    var mySwiper = new Swiper('.swiper', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 3000,
      },
      effect: 'cube',
      cubeEffect: {
        slideShadows: true,
        shadow: true,
        shadowOffset: 100,
        shadowScale: 0.6
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })        
  </script>

</body>

</html>